<template>
    <!--两列布局--> 
   <div class="wrapper tc-detail"> 
    <div class="fl left-list"> 
     <div class="tc-detail"> 
      <!-- 标题区 --> 
      <div class="detail-tit"> 
       <div class="detail-author"> 
        <a href="javascript:;">{{item.nikename}}</a> 发布 
       </div> 
       <div class="detail-content"> 
        <p v-html="item.content"></p> 
       </div> 
       <div class="detail-tool"> 
        <ul> 
         <li><span class="star"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i> {{item.thumbup}}</span></li> 
         <li><a href="#" data-toggle="modal" data-target="#shareModal"><i class="fa fa-share-alt" aria-hidden="true"></i> {{item.share}}</a></li> 
         <li><a data-toggle="modal" @click="dialogVisible=true" data-target="#remarkModal"><i class="fa fa-commenting" aria-hidden="true"></i> {{item.comment}}</a></li> 
        </ul> 
       </div> 
      </div> 
       <!-- 评论区 --> 
      <div class="comment-area" v-infinite-scroll="loadMore"> 
       <div class="comment-tit"> 
        <span>评论</span> 
       </div> 
       <ul class="comment-list"> 

        <li v-for="(c,i) in commentList" :key="i"> 
         <div class="item-photo"> 
          <img src="~/assets/img/widget-widget-photo.png" alt="" /> 
         </div> 
         <div class="item-content"> 
          <p class="author"><a href="javascript:;">{{c.nickname}}</a> 发布</p> 
          <p class="content">{{c.content}}</p> 
         </div> 
         <div class="item-thumb"> 
          <div>
           <i class="fa fa-thumbs-o-up" aria-hidden="true"></i> {{c.thumbup}}
          </div> 
         </div> </li> 

       </ul> 
      </div> 
     </div> 
    </div> 
    <div class="fl right-tag"> 
     <div class="block-btn"> 
      <p>来个匿名吐槽，发泄一下你心中的怒火吧！</p> 
       <router-link class="sui-btn btn-block btn-share" to='/spit/submit'>发吐槽</router-link>
     </div> 
    </div> 
    <div class="clearfix"></div> 
   


      <el-dialog
            title="评论"
            :visible.sync="dialogVisible"
            width="40%">
        <div class="quill-editor" 
            :content="content"
            @change="onEditorChange($event)"
            v-quill:myQuillEditor="editorOption">
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="save">提 交</el-button>
        </span>
        </el-dialog>
   
   
   </div> 
  
</template>

<script>
import '@/assets/css/page-sj-spit-detail.css'
import spitApi from '@/api/spit'

export default {
    asyncData({params}){
        console.log(params.id)
      return spitApi.findById(params.id).then(res=>{
          return spitApi.findCommentList(params.id,1,10).then(res2=>{
                return{
                   item:res.data.data,
                   commentList:res2.data.data.rows,
                   id:params.id
                }
          })
          
      })
    },
    data(){
        return{
          pageNo:1,
          size:10,
          dialogVisible:false,
          editorOption:{},
          content:''
        }
    },
    methods:{
        loadMore(){
            spitApi.findCommentList(this.id,++this.pageNo,this.size).then(res=>{
                this.commentList= this.commentList.concat(res.data.data.rows)
            })
        },
        handleClose(done) {
            this.$confirm('确认关闭评论窗口？')
            .then(_ => {
                done();
            })
            .catch(_ => {});
        },
        save(){
           spitApi.save({content: this.content,parentid: this.id}).then(res=>{
                this.$message({
                    message: res.data.message,
                    type: (res.data.flag?'success':'error')
                })
                //如果成功要刷新评论列表
                if(res.data.flag){
                    //关闭弹窗
                    this.dialogVisible=false
                    //刷新评论列表
                    spitApi.commentList(this.id, 1, this.pageSize).then(res=>{
                        //合并评论的列表
                        this.commentList = res.data.data.rows
                    })
                }
            })
        },
        onEditorChange({ editor, html, text }) {
            console.log('editor change!', editor, html, text)
            this.content = html
      }
    }
}
</script>

<style>
    .quill-editor {
      min-height: 200px;
      max-height: 400px;
      overflow-y: auto;
    }
</style>